
{extend name='public/window' /}

{block name="content"}
<style>
    .layui-upload-drag {
        position: relative;
        padding: 10px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        border-radius: 50%;
    }
    .layui-input{
        width: 80%;
    }
    .layui-form-label{
        width: 120px;
    }

    .layui-upload-drag {
        position: relative;
        padding: 10px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;

    }

    .ttable {
        border-collapse: collapse;
        text-align: center;
        width: 720px;
        table-layout: fixed !important;
    }

    table td {
        border: 0.5px solid #f1f0f0;
        color: #000000;
        height: 30px;
        font-size: 13px;
        width: 30px;
        white-space: nowrap;
        /* 自适应宽度*/
    }

    table th {
        border: 0.5px solid #f1f0f0;
        color: #000000;
        height: 40px;
        font-weight: 600;
        font-size: 15px;
    }


    table thead th {
        width: 144px;
    }

    input {
        border: none;
        height: 30px;
        text-align: center;
        max-width: 144px;
    }

    .layui-input-block {
        margin-left: 141px;
        min-height: 36px;
    }

    .layui-textarea {
        display: block;
        width: 85%;
        padding-left: 10px;
    }

    .layui-input {
        display: block;
        width: 85%;
        padding-left: 10px;
    }

    .layui-form-label {
        width: 110px;
    }

    .swriperC {
        position: fixed;
        top: 100px;
        left: 50%;
        width: 500px !important;
        text-align: center;
        height: 280px !important;
        margin-left: -250px;
        z-index: 9;
    }

    .layFormC {
        position: relative;
    }

    .maskC {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .yes {
        color: #ffffff;
        font-size: 14px;
        background-color: #2d8cf0;
        padding: 3px;
        width: 60px;
        border-radius: 5px;
        text-align: center;
        line-height: 24px;
        display: inline-block;
        float: left;
        margin: 20px 0 20px 0;
    }

    .no {
        color: #ffffff;
        font-size: 14px;
        background-color: #2d8cf0;
        padding: 3px;
        width: 60px;
        border-radius: 5px;
        text-align: center;
        line-height: 24px;
        display: inline-block;
        float: right;
        margin: 20px 0 20px 0;
    }
    .layui-form-select .layui-edge {
        position: absolute;
        right: 53px;
        top: 50%;
        margin-top: -3px;
        cursor: pointer;
        border-width: 6px;
        border-top-color: #c2c2c2;
        border-top-style: solid;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form">
                {if isset($info.id)}
                <input type="hidden" id="taskid" name="id" id="infoId" value="{$info.id}">
                {/if}
                <input type="hidden" name="__token__" id="token" value="{:token()}"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">任务名称 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" autocomplete="off"
                               placeholder="任务名称" class="layui-input" id="merchant_sn_edit">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否需要审核：</label>
                    <div class="layui-input-inline">
                        <select name="is_audit" id="is_audit" lay-verify="required" lay-search="" lay-filter="is_audit">
                            <option value="" >请选择</option>
                            <option value="1" >是</option>
                            <option value="2" >否</option>
                        </select>
                    </div>
                </div>
<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">选择上报类型：</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <select name="report_type" id="report_type" lay-verify="required" lay-search="" lay-filter="report_type">-->
<!--                            <option value="1" >天</option>-->
<!--                            <option value="2" >周</option>-->
<!--                        </select>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">固定月上传：</label>
                    <div class="layui-input-inline">
                        <select name="is_fixed" id="is_fixed" lay-verify="required" lay-search="" lay-filter="is_fixed">
                            <option value="0" >否</option>
                            <option value="1" >是</option>
                        </select>

                    </div>
                    <div style="width: 100%;color: #f74e4e;font-size: 15px;padding-top: 5px">如果是固定月上传,则可以不填上报间隔天数</div>
                </div>
                    {if $info.is_fixed==1}
                        <div class="layui-form up_month">
                    {else/}
                            <div class="layui-form up_month"  style="display: none">
                    {/if}
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择月份</label>
                        <div class="layui-input-block">
                            <div id="up_month" style="width:80%"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上报间隔天数：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="interval_day" name="interval_day" class="layui-input" placeholder="" value="1">

                    </div>
                    <div style="width: 100%;color: #f74e4e;font-size: 15px;padding-top: 5px">每次任务上报的轮训时间</div>
                </div>
                <div class="layui-form-item"  id="interval">
                    <div class="layui-inline">
                        <label class="layui-form-label">上报开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="start_time" name="start_time" class="layui-input" placeholder="任务上报开始时间">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">上报截止时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="end_time" name="end_time" class="layui-input" placeholder="任务上报截止时间">
                        </div>
                    </div>
                </div>

                <div style="margin-bottom: 30px"></div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">添加上传类型</label>
                        <div class="layui-input-inline">
                            <table class="table ttable" id="formId" lay-filter="demo">
                                <thead>
                                <tr style=" background-color: #f7f7f7;">
                                    <th lay-data="{field:'username',width:100}">序号</th>
                                    <th lay-data="{field:'textname',width:100}">对应名称</th>
                                    <th lay-data="{field:'type',width:100}">类型</th>
                                    <th lay-data="{field:'type',width:100}">上传类型</th>
                                    <th lay-data="{field:'type',width:100}">是否必填</th>
                                    <th lay-data="{field:'',width:100}">操作</th>
                                </tr>
                                </thead>
                                <tbody id="tbodyId">
                                {if isset($tree)}
                                {foreach ($tree as $k=>$v)}
                                <tr class="removeBox">
                                    <td>
                                        {$v.id}
                                        <input type="hidden" name="ids" lay-verify="required" id="ids" value="{$v.id}">
                                    </td>
                                    <td><input type="text" name="textname"  lay-verify="required" id="textname" value="{$v['textname']}"></td>
                                    <td>
                                        <select name="type" lay-required="required" id="type">
                                            {if $v.type=='image'}
                                            <option value="{$v.type}">上传图片</option>
                                            {else/}
                                            <option value="{$v.type}">输入框</option>
                                            {/if}
                                            <option value="image">上传图片</option>
                                            <option value="input">输入框</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select name="up_type" lay-required="required" id="up_type">
                                            {if $v.up_type==1}
                                            <option value="{$v.up_type}">只能拍照</option>
                                            {else/}
                                            {if $v.up_type==2}
                                            <option value="{$v.up_type}">只能相册</option>
                                            {else/}
                                            <option value="{$v.up_type}">两者都有</option>
                                            {/if}
                                            {/if}
                                            <option value="">请选择</option>
                                            <option value="1">只能拍照</option>
                                            <option value="2">只能相册</option>
                                            <option value="0">两者都有</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select name="isrequire" lay-required="required" id="isrequire">
                                            {if $v.isrequire==1}
                                            <option value="{$v.isrequire}">是</option>
                                            {else/}
                                            <option value="{$v.isrequire}">否</option>
                                            {/if}
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </td>
                                    <td style="font-weight: 600;"><span style="color: #f00;"><span
                                            onclick="removeInfo(this)" class="removeBtn">移除</span></span></td>
                                </tr>
                                {/foreach}
                                {else/}
                                <tr class="removeBox">
                                    <td><input type="text" name="textname" lay-verify="required" id="textname"></td>
                                    <td>
                                         <select name="type" lay-required="required" id="type">
                                            <option value="">请选择</option>
                                            <option value="image">上传图片</option>
                                            <option value="input">输入框</option>
                                        </select>
                                    </td>
                                    <td>

                                        <select name="up_type" lay-required="required" id="up_type">
                                            <option value="">请选择</option>
                                            <option value="1">只能拍照</option>
                                            <option value="2">只能相册</option>
                                            <option value="0">两者都有</option>
                                        </select>
                                    </td>
                                    <td style="font-weight: 600;"><span style="color: #f00;"><span
                                            onclick="removeInfo(this)" class="removeBtn">移除</span></span></td>
                                </tr>
                                {/if}
                                </tbody>
                            </table>
                            <div style="width: 700px;text-align: center;min-width: 600px;font-size: 13px;font-weight: 600;color: #2d8cf0;line-height: 30px;">
                                <span onclick="addPerson1()">+添加</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-layout-admin " style="width: 100%">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0px;text-align: center;">
                            <button class="layui-btn" lay-submit="" lay-filter="add">{:__('Submit')}</button>
                            <button type="reset" class="layui-btn layui-btn-primary">{:__('Reset')}</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<script>

    var i = 1;
    let number = 1
    let flag
    let personIndex
    var newArray = []
    let submitArray=[]
    let trHtmlString
    var info = {:json_encode($info)};
    console.log(info)
    if(info.text==''||info.text==null){
            window.onload = () => {
                var add = document.getElementById("tbodyId")
                console.log(add)
                trHtmlString =
                    `<tr class="removeBox">\n
                <td>
                    ${add.children.length}
                    <input type="hidden" name="ids" lay-verify="required" id="ids" value="${add.children.length}">
                </td>\n
                <td><input type="text" name="textname" lay-verify="required" id="textname" ></td>\n
                <td>
<!--					<input type="text" name="type" lay-verify="required" id="type"" >-->
                                    <select name="type" lay-required="required" id="type">
                                        <option value="">请选择</option>
                                        <option value="image">上传图片</option>
                                        <option value="input">输入框</option>
                                    </select>
                                    <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title">
                                        <input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" name="">
                                        <i class="layui-edge"></i>
                                    </div>
                                        <dl class="layui-anim layui-anim-upbit">
                                            <dd lay-value="" class="layui-select-tips">请选择</dd>
                                            <dd lay-value="image" class="">上传图片</dd>
                                            <dd lay-value="input" class="">输入框</dd>
                                        </dl>
                                    </div>
                </td>\n
                <td>
<!--					<input type="text" name="type" lay-verify="required" id="type"" >-->
                                    <select name="up_type" lay-required="required" id="up_type">
                                        <option value="">请选择</option>
                                        <option value="1">只能拍照</option>
                                        <option value="2">只能相册</option>
                                        <option value="0">两者都有</option>
                                    </select>
                                    <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title">
                                        <input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" name="">
                                        <i class="layui-edge"></i>
                                    </div>
                                        <dl class="layui-anim layui-anim-upbit">
                                            <dd lay-value="" class="layui-select-tips">请选择</dd>
                                            <dd lay-value="1" class="">只能拍照</dd>
                                            <dd lay-value="2" class="">只能相册</dd>
                                            <dd lay-value="0" class="">两者都有</dd>
                                        </dl>
                                    </div>
                </td>\n
                  <td>
                                        <select name="isrequire" lay-required="required" id="isrequire">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                        <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title">
                                        <input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" name="">
                                        <i class="layui-edge"></i>
                                    </div>
                                        <dl class="layui-anim layui-anim-upbit">
                                            <dd lay-value="1" class="">是</dd>
                                            <dd lay-value="0" class="">否</dd>
                                        </dl>
                                    </div>
                </td>
                <td style="font-weight: 600;"><span style="color: #f00;"><span onclick="removeInfo(this)" class="removeBtn">移除</span></span></td></tr>`
                add.innerHTML = trHtmlString
            }
    }

    console.log(info)

    layui.use(['element', 'form', 'table', 'jquery', 'lucky', 'upload', 'laydate', 'xmSelect', 'carousel'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        var xmSelect = layui.xmSelect;
        var task = {:json_encode($task)};
        var demo = xmSelect.render({
            el:'#up_month',
            data:task
        })
        form.on('select(is_fixed)', function(data){
            var  type = data.value;
            if(type==1){
                $(".up_month").css('display','block'); //隐藏
            }else{
                $(".up_month").css('display','none');
            }
        });
        laydate.render({
            elem: '#start_time'
            ,type: 'datetime',
            trigger: 'click'
        });
        laydate.render({
            elem: '#end_time'
            ,type: 'datetime',
            trigger: 'click'
        });
        window.submi=function (){

            return new Promise((resolve,reject)=>{

                resolve(window.getElementss())
            }).then(res=>{
                // console.log(111,newArray)
                for(let i = 0 ; i < newArray.length; i++){
                    // console.log(222)
                    let submitItem = {...newArray[i]}
                    submitArray.push(submitItem)
                    // console.log(submitArray)
                }
            })
        }
        var removeBtn = document.getElementsByClassName('removeBtn')
        var removeBox = document.getElementsByClassName('removeBox')

        window.addPerson1 = function () {
            let add = document.getElementById("tbodyId")
            let tr = document.createElement("tr")
            add.appendChild(tr)
            number.value = add.children.length
            // console.log(add.children.length,flagNum,"flagNum")
            trHtmlString =
                `<tr class="removeBox">\n
						<td>
                               ${add.children.length}
                                <input type="hidden" name="ids" lay-verify="required" id="ids" value="${add.children.length}">
                        </td>\n
						<td><input type="text" name="textname" lay-verify="required" id="textname" ></td>\n
						<td>
<!--					<input type="text" name="type" lay-verify="required" id="type"" >-->
                                        <select name="type" lay-required="required" id="type">
                                            <option value="">请选择</option>
                                            <option value="image">上传图片</option>
                                            <option value="input">输入框</option>
                                        </select>
                                        <div class="layui-unselect layui-form-select">
                                            <div class="layui-select-title">
                                            <input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" name="">
                                            <i class="layui-edge"></i>
                                        </div>
                                            <dl class="layui-anim layui-anim-upbit">
                                                <dd lay-value="" class="layui-select-tips">请选择</dd>
                                                <dd lay-value="image" class="">上传图片</dd>
                                                <dd lay-value="input" class="">输入框</dd>
                                            </dl>
                                        </div>
					</td>\n
					<td>
<!--					<input type="text" name="type" lay-verify="required" id="type"" >-->
                                        <select name="up_type" lay-required="required" id="up_type">
                                            <option value="">请选择</option>
                                            <option value="1">只能拍照</option>
                                            <option value="2">只能相册</option>
                                            <option value="0">两者都有</option>
                                        </select>
                                        <div class="layui-unselect layui-form-select">
                                            <div class="layui-select-title">
                                            <input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" name="">
                                            <i class="layui-edge"></i>
                                        </div>
                                            <dl class="layui-anim layui-anim-upbit">
                                                <dd lay-value="" class="layui-select-tips">请选择</dd>
                                                <dd lay-value="1" class="">只能拍照</dd>
                                                <dd lay-value="2" class="">只能相册</dd>
                                                <dd lay-value="0" class="">两者都有</dd>
                                            </dl>
                                        </div>
					</td>\n
					  <td>
                                        <select name="isrequire" lay-required="required" id="isrequire">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                        <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title">
                                        <input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect" name="">
                                        <i class="layui-edge"></i>
                                    </div>
                                        <dl class="layui-anim layui-anim-upbit">
                                            <dd lay-value="1" class="">是</dd>
                                            <dd lay-value="0" class="">否</dd>
                                        </dl>
                                    </div>
                    </td>
						<td style="font-weight: 600;"><span style="color: #f00;"><span onclick="removeInfo(this)" class="removeBtn">移除</span></span></td></tr>`
            tr.innerHTML = trHtmlString
            form.render('select');
        }

        function delPerson() {
            var add = document.getElementById("tbodyId")
            console.log(add.children, add.children.length)
            add.removeChild(add.children[add.children.length - 1])
            number.value = add.children.length

        }
        number.onblur = () => {
            var add = document.getElementById("tbodyId")
            let a = (number.value * 1) - add.children.length
            if (a > 0) {
                for (let i = 1; i <= a; i++) {
                    window.addPerson1()
                }
            } else if (a < 0) {
                for (let i = -1; i >= a; i--) {
                    delPerson()
                }
            }
            flag = number.value * 1
        }

        for (let i in removeBtn) {
            removeBtn[i].onclick = () => {
                removeBox[i].innerHTML = ``
            }
        }

        window.removeInfo =function (e) {
            var add = document.getElementById("tbodyId")
            let delNum = e.parentNode.parentNode.parentNode.children[0].innerHTML*1-1
            e.parentNode.parentNode.parentNode.remove()
            // console.log(removeBtn.length)
            number.value = removeBtn.length
            for(let i = 0 ;i < add.children.length; i++){
                // console.log(add.children[i].children[0].innerHTML*1,delNum)
                if(add.children[i].children[0].innerHTML*1 > delNum){
                    add.children[i].children[0].innerHTML = add.children[i].children[0].innerHTML*1-1
                }
            }
            newArray.splice(personIndex,1)
            submitArray.splice(personIndex,1)
        }
        window.getElementss=function () {
            // 获取form表单
            var form = document.getElementById('formId')
            // 创建一个新数组
            var elements = new Array();
            var selectArray = new Array();
            // 获取所有input标签
            var tagElements = form.getElementsByTagName('input');
            var selectS = form.getElementsByTagName('select');
            // 将所有input标签放入数组
            for(let i = 0; i<tagElements.length; i++){
                elements.push(tagElements[i]);

                // console.log(elements)
            }
            for(let i = 0; i<selectS.length; i++){
                selectArray.push(selectS[i])
            }
            let newObj = {}
            console.log(elements.length)
            for (let j = 0; j < elements.length; j++) {
                let newName = elements[j].id
                let newValue = elements[j].value
                if(newName == 'ids'){
                    newObj.id = newValue
                }
                if (newName == 'textname') {
                    newObj.textname = newValue
                    newArray.push(newObj)
                    newObj = {}
                }

            }
            for (let s=0;s<newArray.length;s++){
                newArray[s].type= selectArray[s*3].value;
                newArray[s].up_type=selectArray[s*3+1].value;
                newArray[s].isrequire = selectArray[s*3+2].value;
            }
            // console.log('拼接扣',newArray);
            return
        }
        //表单赋值
        var info = {:json_encode($info)};
        form.val("form",info);
        form.on('submit(add)', function (data) {
            if(data.field.is_fixed==1){
                if(data.field.select==''||data.field.select==null){
                    layer.msg('请选择月份');
                    return false;
                }
            }
            // if(data.field.report_type==2){
            //     if (data.field.interval_day!=7){
            //         layer.msg('上报间隔天数必须为7天');
            //         return  false;
            //     }
            // }
            window.submi().then(res=>{
                // console.log(submitArray)
                // for(let i=0;i<submitArray.length;i++){
                //     if(submitArray[i].type==''){
                //         layer.msg('类型不能为空');
                //         return false;
                //     }
                // }
                var datas = layui.table.cache["student_table"]
                data.field.type = 3 // 添加type
                data.field.is_admin_create = 0 // 添加type
                data.field.pay_status = 0 // 支付状态
                data.field.datas = datas // 添加type
                data.field.personArray = submitArray
                console.log(submitArray)
                // console.log(data.field);
                lucky.FormSubmit("{:url('add')}", data.field, true);
                submitArray = []
                return false;
            })
            // lucky.FormSubmit("{:url('add')}",data.field,true);
            return false;
        });
    })
</script>

{/block}

